import React, { useState, useEffect } from 'react';
import Router, { withRouter } from '@/router/renderRouter';
import { Card, Icon, Col, Row, Button, InputNumber, Input, Modal, message, Divider, Spin } from 'antd';
import { Image } from 'antd';
import './index.scss';
import { transferUppercase, Copy, formatBalance, authPermissions } from '@/utils/utils';
import {
  arbitrateInfo,
  updateArbitRateStatus,
} from '@/api/order'
const PaymentDetail = (props) => {
  const { TextArea } = Input;
  const type = props.type;
  const { confirm } = Modal;
  const edit = props.detailParams.edit || false;
  const [loading, setLoading] = useState(false)
  const [info, setInfo] = useState(false)
  const [remark, changeRemark] = useState('')
  
  
  
  const filterStatus = (value: any) => {
    value = value.toString()
    switch (value) {
      case '10001':
        return '出售中';
        break;
      case '10002':
        return '暂停出售';
        break;
      case '10004':
        return '交易中';
        break;
      case '10007':
        return '交易成功';
        break;
      case '10009':
        return '超时卖家取消交易';
        break;
      case '10003':
        return '待交易';
        break;
      case '10005':
        return '取消交易';
        break;
      case '10006':
        return '已支付';
        break;
      case '10008':
        return '已评价';
        break;
      case '10010':
        return '超时买家取消交易';
        break;
      case '10011':
        return '超时自动完成交易';
        break;
      case '10012':
        return '工单发货';
        break;
      case '10013':
        return '交易失败';
        break;
      default:
        return '未到账';
        break;
    }
  };
  const back = () => {
    props.back();
  }
  
  const submitHandle = async () => {
    try {
      if(!remark){
        message.warning('请输入仲裁意见')
        return false;
      }
      let params = {
        transOrderNo: props.detailParams.id,
        arbitrateMsg: remark
      }
      let res = await updateArbitRateStatus(params)
      if(res.code === 0){
        message.success('操作成功')
        setTimeout(()=>{
          back()
        },500)
      }
    } catch (error) {
      console.log(error)
    }
  };
  
  const getData = async () => {
    try {
      let res = await arbitrateInfo({transOrderNo: props.detailParams.id})
      if(res.code === 0){
        setInfo(res.data)
      }
    } catch (error) {
      console.log(error)
    }
  };
  // 首次更新
  useEffect(() => {
    getData()
    return () => { 
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  } , [])
  
  return (
    <>
      <Spin spinning={loading}>
        <div className="main">
          <div>
            {info&&info.TManagerOrderDTO&&info.TManagerOrderDTO.drawList.map((item, index) => {
              return (
                <Card title={index===0?'出售信息':''} key={'recharge'+index} className="filterContainer">
                  <Row gutter={16}>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">主订单号：</span>{' '}
                      {item.mainOrderNo || '--'}
                    </Col>
                    <Col xl={16} className="mb10">
                      <span className="itemLabel">订单编号：</span>{' '}
                      {item.orderNo || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">申请时间：</span>{' '}
                      {item.applyTime || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">会员账号：</span>{' '}
                      {item.userName || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">收款姓名：</span>{' '}
                      {item.drawAccount || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">账号昵称：</span>{' '}
                      {item.nickName || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">付款银行：</span>{' '}
                      {item.bankName || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">银行开户行：</span>{' '}
                      {item.bankAddress || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">银行卡号：</span>{' '}
                      {item.bankNumber || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">完成时间：</span>{' '}
                      {item.completeTime || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">出售数量：</span>{' '}
                      {(item.transType || item.transType === 0) ? filterStatus(item.transType) : '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">订单状态：</span>{' '}
                      {(item.transType || item.transType === 0) ? filterStatus(item.transType) : '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">可出售数量：</span>{' '}
                      {item.totalValidAmount || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">出售单价：</span>{' '}
                      {item.price || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">是否可拆分：</span>{' '}
                      {item.isSplitOrder === 1 ? '是' : (item.isSplitOrder === 0 || '否' : '--')}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">卖家评价：</span>{' '}
                      {item.sellerEvaluateGrade === '1' ? '差评' : (item.sellerEvaluateGrade === '2' ? '好评' : '--')}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">评价内容：</span>{' '}
                      {item.sellerEvaluateContent || '--'}
                    </Col>
                  </Row>
                </Card>
              );
            })}
            {info&&info.TManagerOrderDTO&&info.TManagerOrderDTO.rechargeList.map((item, index) => {
              return (
                <Card title={index===0?'买入信息':''} key={index} className="filterContainer">
                  <Row gutter={16}>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">主订单号：</span>{' '}
                      {item.mainOrderNo || '--'}
                    </Col>
                    <Col xl={16} className="mb10">
                      <span className="itemLabel">订单编号：</span>{' '}
                      {item.orderNo || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">申请时间：</span>{' '}
                      {item.applyTime || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">会员账号：</span>{' '}
                      {item.userName || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">收款姓名：</span>{' '}
                      {item.drawAccount || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">账号昵称：</span>{' '}
                      {item.nickName || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">收款银行：</span>{' '}
                      {item.bankName || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">银行卡号：</span>{' '}
                      {item.bankNumber || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">开户地址：</span>{' '}
                      {item.bankAddress || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">买入数量：</span>{' '}
                      {item.totalCount || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">订单状态：</span>{' '}
                      {(item.transType || item.transType === 0) ? filterStatus(item.transType) : '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">完成时间：</span>{' '}
                      {item.completeTime || '--'}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">买家评价：</span>{' '}
                      {item.evaluateGrade === '1' ? '差评' : (item.evaluateGrade === '2' ? '好评' : '--')}
                    </Col>
                    <Col xl={8} className="mb10">
                      <span className="itemLabel">评价内容：</span>{' '}
                      {item.evaluateContent || '--'}
                    </Col>
                    <Col xl={24} className="mb20">
                      <span className="itemLabel">付款凭证(点击放大)：</span>{' '}
                      {item.transVoucherList&&item.transVoucherList.map((img, imgIndex) => {
                        return (
                          <Image
                            width={200}
                            src={img}
                          />
                        );
                      })}
                    </Col>
                  </Row>
                </Card>
              );
            })}
            <Card title={'订单仲裁'} className="filterContainer">
              <Row gutter={16}>
                <Col xl={12} className="mb10">
                  <span className="itemLabel">仲裁单号：</span>{' '}
                  {info&&info.arbitrateOrderNo || '--'}
                </Col>
                <Col xl={12} className="mb10">
                  <span className="itemLabel">仲裁状态：</span>{' '}
                  {info&&info.arbitrateStatus === 1 ? '仲裁中' : (info&&info.arbitrateStatus === 2 ? '审核中' : (info&&info.arbitrateStatus === 3 ? '仲裁完整' : '--'))}
                </Col>
                <Col xl={12} className="mb10">
                  <span className="itemLabel">仲裁时间：</span>{' '}
                  {info&&info.arbitrateDate || '--'}
                </Col>
                <Col xl={12} className="mb10">
                  <span className="itemLabel">仲裁人：</span>{' '}
                  {info&&info.arbitrateOperator || '--'}
                </Col>
                {
                  props.detailParams.edit === true
                  ?
                  <Col xl={24} className="mb10">
                    <span className="itemLabel">仲裁客服意见：</span>{' '}
                    <TextArea
                      placeholder="请输入仲裁意见"
                      autosize={{ minRows: 3, maxRows: 5 }}
                      style={{ width: '90%' }}
                      onChange={(e) => {changeRemark(e.target.value)}}
                    /> 
                  </Col>
                  :
                  ''
                }
              </Row>
            </Card>
            <div className="btnBox">
              {
                props.detailParams.edit === true
                ?
                <Button type="primary" onClick={()=>{submitHandle()}}>
                  转交风控
                </Button>
                :
                ''
              }
              <Button onClick={()=>{back()}}>
                返回
              </Button>
            </div>
          </div>
        </div>
      </Spin>
    </>
  )
}
export default withRouter(PaymentDetail)